<template>
  <view class="empty-state">
    <view class="empty-content">
      <!-- 空状态图标 -->
      <view class="empty-icon">
        <image v-if="image" class="empty-image" :src="image" mode="aspectFit"></image>
        <uni-icons v-else :type="iconType" size="80" color="#d0d0d0"></uni-icons>
      </view>
      
      <!-- 空状态文本 -->
      <text class="empty-title">{{ title }}</text>
      <text class="empty-description" v-if="description">{{ description }}</text>
      
      <!-- 操作按钮 -->
      <button v-if="showButton" 
              class="empty-button" 
              :class="buttonClass"
              @tap="handleButtonClick">
        {{ buttonText }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'EmptyState',
  props: {
    // 空状态类型
    type: {
      type: String,
      default: 'default',
      validator: (value) => [
        'default', 'search', 'cart', 'order', 'favorite', 
        'network', 'product', 'review', 'address'
      ].includes(value)
    },
    // 自定义图片
    image: {
      type: String,
      default: ''
    },
    // 自定义标题
    title: {
      type: String,
      default: ''
    },
    // 自定义描述
    description: {
      type: String,
      default: ''
    },
    // 是否显示按钮
    showButton: {
      type: Boolean,
      default: true
    },
    // 按钮文本
    buttonText: {
      type: String,
      default: ''
    },
    // 按钮样式类
    buttonClass: {
      type: String,
      default: 'primary'
    }
  },
  
  computed: {
    // 根据类型获取默认配置
    config() {
      const configs = {
        default: {
          iconType: 'info-filled',
          title: '暂无数据',
          description: '',
          buttonText: '刷新'
        },
        search: {
          iconType: 'search',
          title: '没有找到相关内容',
          description: '试试其他关键词吧',
          buttonText: '重新搜索'
        },
        cart: {
          iconType: 'cart',
          title: '购物车是空的',
          description: '快去挑选心仪的商品吧',
          buttonText: '去逛逛'
        },
        order: {
          iconType: 'list',
          title: '暂无订单',
          description: '您还没有任何订单记录',
          buttonText: '去购物'
        },
        favorite: {
          iconType: 'heart',
          title: '暂无收藏',
          description: '收藏喜欢的商品，方便下次查看',
          buttonText: '去逛逛'
        },
        network: {
          iconType: 'wifi-off',
          title: '网络连接失败',
          description: '请检查网络设置后重试',
          buttonText: '重试'
        },
        product: {
          iconType: 'shop',
          title: '暂无商品',
          description: '该分类下暂时没有商品',
          buttonText: '看看其他'
        },
        review: {
          iconType: 'chat',
          title: '暂无评价',
          description: '还没有用户评价，快来抢沙发吧',
          buttonText: '去评价'
        },
        address: {
          iconType: 'location',
          title: '暂无收货地址',
          description: '添加收货地址，享受便捷购物',
          buttonText: '添加地址'
        }
      }
      
      return configs[this.type] || configs.default
    },
    
    // 图标类型
    iconType() {
      return this.config.iconType
    },
    
    // 实际显示的标题
    actualTitle() {
      return this.title || this.config.title
    },
    
    // 实际显示的描述
    actualDescription() {
      return this.description || this.config.description
    },
    
    // 实际显示的按钮文本
    actualButtonText() {
      return this.buttonText || this.config.buttonText
    }
  },
  
  methods: {
    handleButtonClick() {
      this.$emit('button-click', this.type)
    }
  }
}
</script>

<style scoped>
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400rpx;
  padding: 60rpx 40rpx;
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 500rpx;
}

.empty-icon {
  margin-bottom: 30rpx;
}

.empty-image {
  width: 160rpx;
  height: 160rpx;
}

.empty-title {
  font-size: 32rpx;
  color: #666;
  font-weight: 500;
  margin-bottom: 15rpx;
  line-height: 44rpx;
}

.empty-description {
  font-size: 26rpx;
  color: #999;
  line-height: 36rpx;
  margin-bottom: 40rpx;
}

.empty-button {
  min-width: 200rpx;
  height: 72rpx;
  border-radius: 36rpx;
  font-size: 28rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-button.primary {
  background-color: #ff4757;
  color: #fff;
}

.empty-button.secondary {
  background-color: #f5f5f5;
  color: #666;
}

.empty-button.outline {
  background-color: transparent;
  color: #ff4757;
  border: 1px solid #ff4757;
}

.empty-button:active {
  opacity: 0.8;
}

/* 不同尺寸的空状态 */
.empty-state.small {
  min-height: 200rpx;
  padding: 40rpx 30rpx;
}

.empty-state.small .empty-image {
  width: 120rpx;
  height: 120rpx;
}

.empty-state.small .empty-title {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.empty-state.small .empty-description {
  font-size: 24rpx;
  margin-bottom: 30rpx;
}

.empty-state.small .empty-button {
  min-width: 160rpx;
  height: 60rpx;
  font-size: 26rpx;
}

.empty-state.large {
  min-height: 600rpx;
  padding: 100rpx 40rpx;
}

.empty-state.large .empty-image {
  width: 200rpx;
  height: 200rpx;
}

.empty-state.large .empty-title {
  font-size: 36rpx;
  margin-bottom: 20rpx;
}

.empty-state.large .empty-description {
  font-size: 28rpx;
  margin-bottom: 50rpx;
}

.empty-state.large .empty-button {
  min-width: 240rpx;
  height: 80rpx;
  font-size: 30rpx;
}
</style>